<template>
  <div>
    <Breadcrumb>
      <Breadcrumb-item href="/">首页</Breadcrumb-item>
      <Breadcrumb-item href="/users/list">用户列表</Breadcrumb-item>
      <Breadcrumb-item>{{ id ? '编辑' : '新增' }}用户</Breadcrumb-item>
    </Breadcrumb>
    <div>
      <Form ref="formUser" :model="formUser" :rules="ruleValidate" :label-width="100">
        <Form-item label="用户名" prop="username">
          <Row>
            <Col span="12">
              <Input v-model="formUser.username" v-if="id" readonly />
              <Input v-model="formUser.username" v-else placeholder="请输入用户名" />
            </Col>
          </Row>
        </Form-item>

        <Form-item label="名称" prop="name">
          <Row>
            <Col span="12">
              <Input v-model="formUser.name" placeholder="请输入名称" />
            </Col>
          </Row>
        </Form-item>

        <Form-item label="密码" prop="password" v-if="!id">
          <Row>
            <Col span="12">
              <Input v-model="formUser.password" placeholder="请输入密码" />
            </Col>
          </Row>
        </Form-item>

        <Form-item label="手机号" prop="mobile">
          <Row>
            <Col span="12">
              <Input v-model="formUser.mobile" placeholder="请输入手机号" />
            </Col>
          </Row>
        </Form-item>

        <Form-item label="Email" prop="email">
          <Row>
            <Col span="12">
              <Input v-model="formUser.email" placeholder="请输入邮箱" />
            </Col>
          </Row>
        </Form-item>

        <!--
        <Form-item label="是管理员?" prop="admin">
          <Row>
            <Col span="12">
              <RadioGroup v-model="formUser.admin">
                <Radio :label="0">
                    <span>普通用户</span>
                </Radio>
                <Radio :label="1">
                    <span>管理员</span>
                </Radio>
              </RadioGroup>
            </Col>
          </Row>
        </Form-item>
        -->

        <Form-item>
          <Button type="primary" @click="handleSave" class="margin-right-sm">保存</Button>
          <Button type="ghost" @click="$router.back()">返回</Button>
        </Form-item>
      </Form>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import User from '@/service/app/user'
import Validation from '@/service/validation'

export default {
  name: 'UserForm',
  components: {
  },
  data () {
    return {
      id: '',
      typeList: User.typeList,
      formUser: {
        username: '',
        password: 'wits100',
        name: '',
        mobile: '',
        email: '',
        type: User.types.OPERATOR,
        admin: 0
      },
      ruleValidate: {
        username: [
          {
            required: true,
            message: '用户名不能为空'
          },
          {
            max: 100,
            message: '用户名不能多于 100 个字'
          },
          {
            min: 4,
            message: '用户名不能少于 4 个字'
          },
          {
            validator: Validation.userNameValidator,
            message: '用户名只能是 数字,字母, ._'
          }
        ],
        name: [
          {
            required: true,
            message: '名称不能为空'
          },
          {
            max: 100,
            message: '名称不能多于 100 个字'
          }
        ],
        password: [
          {
            min: 4,
            message: '密码不能少于 4 个字'
          },
          {
            max: 20,
            message: '密码不能多于 20 个字'
          }
        ],
        mobile: [
          {
            required: true,
            message: '号码不能为空'
          },
          {
            max: 20,
            message: '号码不能多于 20 个数'
          }
        ],
        type: [
          {
            required: true,
            message: '必需选择类型'
          }
        ]
      }
    }
  },
  computed: {
    ...mapState(['users'])
  },
  watch: {
    'users.user': {
      handler (newVal) {
        this.$set(this, 'formUser', newVal)
      }
    }
  },
  created () {

    this.id = this.$route.params.id
    this.id && this.get(this.id)
  },
  methods: {
    get (id) {
      this.$store.dispatch('getUser', {username: id})
    },
    handleSave () {
      this.$refs.formUser.validate((valid) => {
        if (valid) {
          const action = this.id ? 'putUser' : 'postUser'
          this.$store.dispatch(action, this.formUser).then(() => {
            this.$Message.success((this.id ? '编辑' : '新增') + '成功！')
            !this.id && this.resetFields()

            if (!this.id) {
              this.$router.back()
            }
          })
        }
      })
    },
    resetFields () {
      this.$refs.formUser.resetFields()

      this.formUser.admin = 0
    }
  }
}
</script>
